<template>
  <section class="scene-section">
    <h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
    <div class="scene-list">
      <!-- 遍历场景项，通过selectedIndex控制默认选中状态 -->
      <div
        v-for="(item, index) in sceneList"
        :key="index"
        class="scene-item"
        :class="{ active: selectedIndex === index }"
        @mouseenter="selectedIndex = index"
        @mouseleave="
          () => {
            if (index !== defaultIndex) selectedIndex = defaultIndex
          }
        "
      >
        <div class="scene-inner">
          <div class="scene-content">
            <img :src="item.icon" alt="场景图标" class="scene-icon" />
            <p class="scene-name">{{ item.name }}</p>
            <p class="scene-desc">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 场景数据
const sceneList = [
  {
    name: '地区政府/社区健康服务',
    desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
    icon: 'https://images.health.ufutx.com/202506/30/87f66f9deca9c217d3f86d7d7c5d25c9.png'
  },
  {
    name: '医院体检中心/健康管理机构',
    desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
    icon: 'https://images.health.ufutx.com/202506/30/32b9067c68fc706ab7596c621720f847.png'
  },
  {
    name: '企业员工健康管理', // 默认选中第3项（索引2）
    desc: '降低企业医疗成本，提升员工健康与生产力。',
    icon: 'https://images.health.ufutx.com/202506/30/1de2a31aa67aa92ed7c5d59de0936bbf.png'
  },
  {
    name: '健康产业链供应商',
    desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
    icon: 'https://images.health.ufutx.com/202506/30/ddbb65cf7004bb06982e0bbfa4e9bdb1.png'
  },
  {
    name: '健康管理专业培训',
    desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
    icon: 'https://images.health.ufutx.com/202506/30/0bc22b00e61752cab79bad46318a680c.png'
  }
]

// 默认选中第3项（索引2）
const defaultIndex = 2
// 当前选中索引（响应式）
const selectedIndex = ref(defaultIndex)
</script>

<style scoped lang="less">
@import '@/styles/global.less';

.scene-section {
  text-align: center;
  background-color: @bg-color;

  .scene-title {
    font-size: @font-size-xxl;
    font-weight: @font-weight-bold;
    color: @text-color;
    .pb(60px);
    .pt(100px);
  }

  .scene-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: @space-lg;
  }

  .scene-item {
    width: 284px;
    height: 336px;
    perspective: 1000px;
    cursor: pointer;
    transform: translateZ(0); /* 硬件加速 */

    // 激活状态（默认选中/悬停）共用样式
    &.active .scene-inner,
    &:hover .scene-inner {
      //box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      //transform: translateY(-10px) scale(1.03);
    }

    &.active .scene-content,
    &:hover .scene-content {
      //background-color: #e6f0ff;
      background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
    }

    &.active .scene-icon,
    &:hover .scene-icon {
      transform: scale(1.1);
      margin-bottom: 15px;
    }

    &.active .scene-name,
    &:hover .scene-name {
      //color: @primary-color;
      transform: translateY(5px);
    }

    &.active .scene-desc,
    &:hover .scene-desc {
      opacity: 1;
      transform: translateY(0);
      max-height: 100px;
    }

    .scene-inner {
      position: relative;
      width: 100%;
      height: 100%;
      //background-color: #fff;
      background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
      border-radius: @border-radius-md;
      overflow: hidden;
      //box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .scene-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px 16px;
      height: 100%;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .scene-icon {
      width: 150px;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      margin-bottom: 20px;
    }

    .scene-name {
      font-size: @font-size-md;
      font-weight: @font-weight-medium;
      color: @text-color;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      margin-bottom: 10px;
    }

    .scene-desc {
      font-size: @font-size-sm;
      color: @text-color-secondary;
      line-height: 1.4;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      max-height: 0;
      overflow: hidden;
      margin-top: 10px;
    }
  }
}

@media (max-width: @tablet-breakpoint) {
  .scene-section {
    margin-bottom: 50px;
  }
  .scene-item {
    width: 100%;
    max-width: 280px;
  }
}
</style>
